<template>
    <div id="mine">
      <div class="head">
        <router-link class="return" to='/'><img src="../assets/return.png"></router-link>
        <span>美团网</span>
        <div class="navigation" v-on:click.stop="navigation">
          <img src="../assets/navigation.png">
          <span>导航</span>
        </div>
      </div>
      <div class="nav" v-show="flag" ref="main">
        <router-link class="homepage1" to="/">
          <img src="../assets/homepage.png">
          <span>首页</span>
        </router-link>
        <router-link class="mine1" to="mine">
          <img src="../assets/mine.png">
          <span>我的</span>
        </router-link>
        <router-link class="search1" to="search">
          <img src="../assets/search.png">
          <span>搜索</span>
        </router-link>
      </div>
      <div class="securityuser">
        <a class="login"
           v-for="login in logins" :key="login.id"
           @click="selected(login)"
           :class="{change: changeLogin == login.id}">{{login.name}}</a>
      </div>
      <div class="number" >
        <form @submit.prevent="submit" class="numberlogin">
          <div>
            <input type="text" name="name" v-model="inputtext.name" placeholder="请输入用户名" class="numbername">
            <input type="password" name="password" v-model="inputtext.password" placeholder="请输入密码" class="numberpassword" >
          </div>
          <input type="submit" value="登录" class="numbersubmit">
        </form>
        <div class="link">
          <router-link class="regnow" to="login" >立即注册</router-link>
          <router-link class="forget" to="forget">忘记密码</router-link>
        </div>
      </div>
      <div class="phone" v-show="phone" >
        <form @submit.prevent="submit" class="numberlogin">
          <div>
            <input type="text" name="name" v-model="inputtext.name" placeholder="请输入手机号" class="numbername">
            <input type="password" name="password" v-model="inputtext.password" placeholder="请输入短信验证码" class="numberpassword" >
          </div>
          <input type="submit" value="登录" class="numbersubmit">
        </form>
        <div class="link">
          <router-link class="regnow" to="login" >立即注册</router-link>
          <router-link class="forget" to="forget">忘记密码</router-link>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'mine',
  data () {
    return {
      flag: false,
      ins: 0,
      logins: [ {
        id: 1, name: '美团账号登陆'
      }, {
        id: 2, name: '手机验证登陆'
      }],
      changeLogin: '1',
      phone: false,
      inputtext: {}
    }
  },
  methods: {
    navigation: function () {
      this.flag ? this.hide() : this.show()
    },
    show () {
      this.flag = true
      document.addEventListener('click', this.hidePanel, false)
    },

    hide () {
      this.flag = false
      document.removeEventListener('click', this.hidePanel, false)
    },

    hidePanel (e) {
      if (!this.$refs.main.contains(e.target)) {
        this.hide()
      }
    },
    selected: function (login) {
      this.changeLogin = login.id
      this.phone = !this.phone
    },
    submit: function () {
      console.log(this.inputtext)
    }
  },
  beforeDestroy () {
    this.hide()
  }
}
</script>

<style scoped lang="scss">
  *{
    margin: 0;
    padding: 0;
  }
  #mine{
    width: 6.4rem;
    height: 11.368rem;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    margin: 0 auto;
    position: relative;
    background-color: #f0efed;
  }
  .head{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    margin: 0 ;
    padding: 0;
    width: 100%;
    height: 1rem;
    background-color: #06c1ae;
    border-bottom:1px solid #21897d;
    .return{
      img{
        display: block;
        width: .5rem;
        height: .5rem;
        margin: .25rem;
      }
    }
    span{
      font-size: .4rem;
      line-height: 1rem;
      color: #fff;
    }
    .navigation{
      display: flex;
      flex-direction: column;
      align-content: center;
      margin-right: .2rem;
      width: .6rem;
      img{
        display: block;
        width: .4rem;
        height: .4rem;
        margin: .1rem ;
      }
      span{
        display: block;
        line-height: .4rem;
        font-size: .2rem;
        text-align: center;
      }
    }
  }
  .nav{
    margin: .05rem .05rem 0 0;
    width: 2rem;
    height: 2.4rem;
    flex-direction: column;
    background-color: #06c1ae;
    opacity: 0.9;
    display: flex;
    position: absolute;
    right: 0;
    z-index: 5;
     .homepage1,.mine1, .search1{
      display: flex;
      border-bottom: 1px solid #21897d;
      text-align: center;
      font-size: .35rem;
      line-height: .8rem;
      color: #fff;
    }
    img{
      display: block;
      width: .4rem;
      height: .4rem;
      margin: .2rem;
    }
  }
  .number{
    position: absolute;
    z-index: 1;
  }
  .phone{
    z-index: 3;
    position: absolute;
  }
  .securityuser{
    width: 6rem;
    padding: 0 .2rem;
    height:.8rem;
    background-color: #fff;
    border-bottom: .08rem solid #DDD8CE;
    display: flex;
    margin: 0 auto;
    .login{
      display: block;
      width:3rem;
      height: .8rem;
      font-size: .3rem;
      text-align: center;
      line-height: .8rem;
    }
    .change{
      border-bottom: .08rem solid #06c1ae;
    }
  }
  .numberlogin{
    display: block;
    width: 6.4rem;
    background-color: #f0efed;
    div{
      width: 6.4rem;
      background-color: #fff;
      input{
        padding: .1rem .2rem .1rem 0;
        box-shadow: white inset;
      }
      .numbername{
        border-bottom: 1px solid #ddd8ce;
      }
    }
    input{
      display: block;
      outline: none;
      width: 6rem;
      height: .6rem;
      border: none;
      margin-left:.2rem ;
      text-indent: .1rem;
      line-height: 1;
      font-size: .3rem;
      border-radius: .06rem;
      padding: 0;
    }
    .numbersubmit{
      background-color:#06c1ae;
      margin: .3rem .2rem;
      color: #fff;
      height: .8rem;
      font-size: .4rem;
    }
  }
  .link{
    width: 6.4rem;
    font-size: .3rem;
    display: flex;
    justify-content: space-between;
    .regnow,.forget{
      display: block;
      color: #06c1ae;
      margin: 0 .5rem .1rem .5rem;
    }
  }
</style>
